<template>
  <div style="text-align:center;" class="login-content" :style="{backgroundImage: 'url('+img+')'}">
    <div class="container" style="text-align:left;">
      <div class="row">
        <div class="col-md-2">
        </div>
        <div class="col-md-5">
        </div>
        <div class="col-md-4">
          <div class="login-form-wrap">
            <div class="title">用户登录</div>
            <div class="input-group input-group-lg"
                 style="margin-top: 40px;padding-left: 30px;padding-right:30px;width: 450px;height: 58px;">
                        <span class="input-group-addon" style="background-color: #fff;border-radius: 0px"><img
                          src="../assets/index/mobile_login.png" width="12"> </span>
              <input type="text" id="username" v-model="username" class="form-control" placeholder="手机号码"
                     style="height:58px;border-radius: 0px;padding: 5px 10px;font-size: 16px;">
            </div>
            <div class="input-group input-group-lg"
                 style="margin-top: 40px;padding-left: 30px;padding-right:30px;width: 450px;height: 58px;">
                        <span class="input-group-addon" style="background-color: #fff;border-radius: 0px"> <img
                          src="../assets/index/password_login.png" width="12"></span>
              <input type="password" id="userpwd" v-model="password" class="form-control" placeholder="登录密码"
                     style="height:58px;border-radius: 0px;padding: 5px 10px;font-size: 16px;">
            </div>
            <h6 style="text-align:right;color:#999;padding:10px 20px;padding-right:37px;font-size:18px">
              <router-link
                :to="{name:'forgetPwd'}">忘记密码？
              </router-link>
            </h6>
            <h6 style="text-align:center;color:#999;margin-top: 20px">
              <button class="btn btn-warning" type="button" :disabled="btnStatus"
                      style="padding: 16px 140px;border-radius: 0px;font-size: 24px;background: rgb(255, 153, 0);width: 400px;"
                      @click="login">{{btnText}}
              </button>
            </h6>
            <h6 style="text-align:right;color:#999;padding:10px;padding-right: 154px;font-size:18px">没有Au+财富黄金帐号?
              <router-link :to="{name:'register'}" style="color:#ff7d00">立即注册</router-link>
            </h6>
          </div>
        </div>
      </div>
    </div>
    <Notify :parentThis='this'></Notify>
  </div>
</template>
<script>
  import API from '../api'
  import Notify from './Notify'
  export default {
    name: 'register',
    components: {
      Notify
    },
    props: ['_parentThis'],
    data: function () {
      return {
        username: '',
        password: '',
        btnStatus: true,
        showTop: false,
        notifyStatus: 2,
        btnText: '登录',
        img: require('../assets/login_background.png')
      }
    },
    methods: {
      login: function () {
        this.btnText = '正在登录……'
        this.$http.post(API.login, {
          mobile: this.username,
          password: this.password
        }).then((ret) => {
          const result = ret.body
          if (result.code === 1) {
            this.$cookie.set('id', result.object.id)
            this.$cookie.set('createTime', result.object.createTime)
            this.$cookie.set('mobile', result.object.mobile)
            this.$cookie.set('isPush', result.object.isPush)
            this.$cookie.set('account', result.object.account)
            this.$cookie.set('glodBean', result.object.glodBean)
            this.$cookie.set('dayNumber', result.object.dayNumber)
            this.$cookie.set('existPay', result.object.existPay)
            this.$cookie.set('token', result.object.token)
            this.$cookie.set('photo', result.object.photo)
            this.$cookie.set('tomorrowGoldBeanNumber', result.object.tomorrowGoldBeanNumber)
            this._parentThis.loginStatus = 1
            this._parentThis.isHide = false
            this._parentThis.realgoldStatus = false
            this._parentThis.chatStatus = false
            this.$router.push({name: 'home'})
          } else {
            this.password = ''
            this.notifyStatus = '0|' + result.message
          }
          this.btnText = '登录'
        }, (err) => {
          this.password = ''
          console.log(err)
        })
      }
    },
    watch: {
      username: function (newValue, oldValue) {
        if (newValue && this.password) {
          this.btnStatus = false
        } else {
          this.btnStatus = true
        }
      },
      password: function (newValue, oldValue) {
        if (newValue && this.username) {
          this.btnStatus = false
        } else {
          this.btnStatus = true
        }
      }
    },
    mounted: function () {
      this.$cookie.delete('id')
      this._parentThis.loginStatus = 0
    }
  }

</script>
<style lang="scss">
  .login-content {
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    max-height: 910px;
    background-size: cover;
    min-height: 500px;
    margin: 0 auto;
  }

  .login-form-wrap {
    margin-top: 80px;
    margin-bottom: 174px;
    width: 500px;
    height: 478px;
    background: white;
    padding-top: 25px;
    padding-left: 25px;
    padding-right: 25px;

  .title {
    border-bottom: 1px solid #e6760a;
    font-size: 20px;
    padding-bottom: 5px;
    color: #e6760a;
  }

  #username, #userpwd {
    width: 100%;
    height: 58px;
    border-radius: 0px;
    padding: 5px 10px;
    font-size: 16px;
    box-shadow: none;
    border-left: 0;
  }

  #username:focus, #userpwd:focus {
    border: 1px solid #ccc;
    border-left: 0;
  }

  }
</style>
